<template>
  <div class="course-week">
    <div class="week-top">
      <div class="week-btn-wrap">
        <span @click="getLastWeek">
          <svg t="1671420454329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2842" width="16" height="16">
            <path
              d="M513.753 64.947c-238.627 0-432.77 196.2-432.77 437.351 0 241.153 194.143 437.353 432.77 437.353 238.627 0 432.772-196.202 432.772-437.353 0-241.15-194.143-437.351-432.772-437.351z m0 820.035c-208.804 0-378.675-171.665-378.675-382.684 0-211.013 169.871-382.68 378.675-382.68S892.43 291.285 892.43 502.298c0 211.02-169.871 382.684-378.677 382.684z m216.385-410.017H362.666L478.782 357.62c10.563-10.677 10.563-27.976 0-38.654a26.849 26.849 0 0 0-38.251 0l-162.288 164.01c-10.567 10.675-10.567 27.975 0 38.651l162.288 164.012c5.283 5.337 12.205 8.004 19.124 8.004 6.924 0 13.841-2.667 19.127-8.004 10.563-10.679 10.563-27.974 0-38.654l-116.116-117.35h367.472c14.953 0 27.047-12.225 27.047-27.336 0-15.107-12.092-27.333-27.047-27.333z"
              p-id="2843" fill="#1296db"></path>
          </svg></span>
        <!-- <span @click="getCurWeek">今日</span>
         -->
        <span class="w-today-date" @click="getCurWeek"> {{ todayDate }}</span>
        <span @click="getNextWeek"><svg t="1671420485056" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="1114" width="16" height="16">
            <path
              d="M510.247 959.053c238.62699999 0 432.77-196.19999999 432.77-437.351 0-241.153-194.143-437.353-432.77-437.353-238.62699999 0-432.772 196.202-432.772 437.35300001 0 241.15 194.143 437.351 432.772 437.35099999z m0-820.035c208.804 0 378.675 171.665 378.675 382.684 0 211.013-169.871 382.68-378.675 382.68S131.57 732.715 131.57 521.702c0-211.02000001 169.871-382.684 378.677-382.684z m-216.385 410.01700001L661.334 549.035 545.218 666.38c-10.563 10.677-10.563 27.976 0 38.654a26.849 26.849 0 0 0 38.251-1e-8l162.288-164.00999999c10.567-10.675 10.567-27.975 0-38.651l-162.288-164.012c-5.283-5.33700001-12.205-8.004-19.12399999-8.004-6.924 0-13.841 2.667-19.12700001 8.004-10.563 10.67900001-10.563 27.974 0 38.654l116.116 117.35-367.472 0c-14.953 0-27.047 12.225-27.047 27.336 0 15.107 12.092 27.333 27.047 27.333z"
              p-id="1115" fill="#1296db"></path>
          </svg></span>
      </div>

      <!-- <span class="w-today-date"> {{ todayDate }}</span> -->
      <span class="w-today-date"> 按日查询</span>
      <div class="w-choose-status">
        <div v-for="sta in cardStatus">
          <span class="square" :style="{ background: sta.color }"></span>
          <span class="title">{{ sta.title }}</span>
        </div>
      </div>
    </div>

    <div class="week-table">
      <div class="table-header">
        <!-- 表头--星期：时段 周日 周一 周二 周三 周四 周五 周六 -->

        <!-- 表头--日期：时段 周日 周一 周二 周三 周四 周五 周六 -->
        <div class="w-table-date">
          <span>{{ curDay }}</span>
          <template v-for="(item, index) in months.slice(1)" :key="index">
            <span class="w-day-item" :class="{ 'w-isCurDate': item && item.isCurDate }">
              {{
                  `${item && item.isCurDate
                    ? (item && item.showDate + "(今天)") || ""
                    : (item && item.showDate) || ""
                  }`
              }}
            </span>
            <!-- <span class="w-first" v-if="index === 0" :key="index"> </span>
            <template v-else>
              
            </template> -->
          </template>
        </div>
      </div>
      <!-- 下拉 -->
      <div class="demo-scroll-top" ref="scroll">
        <div class="w-time-period-list">
          <ul class="w-time-period-row">
            <!--循环时段，看时段有多少个-->
            <template v-if="planList.length > 0">
              <li class="w-time-period-col" v-for="(period, p_index) in planList" :key="`period${p_index}`">
                <!--第一列显示时段-->
                <div class="w-time-period">{{ period.timePeriod }}</div>
                <!-- 后面显示周一到周日的计划-->
                <div class="w-row-day">
                  <!-- 循环显示每周的日期-->
                  <template v-for="(month, m_index) of months">
                    <!-- v-if="month" 去除数据处理的时候移除数组第一个为empty的问题-->
                    <div v-if="month" :key="`month${m_index}`" class="w-things"
                      @click="handleCardDetail(month, period)">
                      <!-- 循环每个时间段的计划-->
                      <template v-for="(card, t_index) of period.schedule">
                        <template v-for="(single, sIndex) in card[month.date]">
                          <template v-if="!card.isExpend">
                            <div v-if="
                              single.date === month.date &&
                              sIndex < hasNumExpend
                            " :key="`thing${sIndex}`" class="w-thing-item" @click="handleDetail(single)" :style="{
  background: cardStatus[single.status].color,
}">
                              <slot name="thing" :row="single"></slot>
                            </div>
                          </template>
                          <template v-if="card.isExpend">
                            <div v-if="single.date === month.date" :key="`thing${sIndex}`" class="w-thing-item"
                              @click="handleDetail(single)" :style="{
                                background: cardStatus[single.status].color,
                              }">
                              <slot name="thing" :row="single"></slot>
                            </div>
                          </template>
                          <div class="w_expand" v-if="
                            card[month.date].length > hasNumExpend &&
                            card[month.date].length - 1 === sIndex &&
                            !card.isExpend &&
                            single.date === month.date
                          " @click="handleExpand(card)">
                            展开
                          </div>
                          <div class="w_shrink" v-if="
                            card[month.date].length > hasNumExpend &&
                            card[month.date].length - 1 === sIndex &&
                            card.isExpend &&
                            single.date === month.date
                          " @click="handleExpand(card)">
                            收缩
                          </div>
                        </template>
                      </template>
                    </div>
                  </template>
                </div>
              </li>
            </template>
            <div class="w-noMore" v-else><span>暂无数据</span></div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate, getCurDay } from "../../util/MyTools";
import showToDoList from '@/views/Form/showToDoList.vue'

export default {
  name: "WSchedule",
  props: {
    planList: {
      type: Array,
      default: [],
    },
    //卡片状态
    cardStatus: {
      type: Object,
      default: () => {
        return {
          2: {
            title: "",
            color: "",
          },
          1: {
            title: "完成",
            color: "#3291F8",
          },
          0: {
            title: "待完成",
            color: "#FF6200",
          },
        };
      },
    },
    //第一列是星期几
    isFirstDayOfMondayOrSunday: {
      type: Number,
      default: 1,
    },
    // 显示条数
    hasNumExpend: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      week: ["日", "一", "二", "三", "四", "五", "六"],
      curDay: "",
      weeks: ["时段", new Date()],
      todayDate: "",
      months: [],
      curDate: "",
      nowDate: new Date(),
    };
  },
  components: {
    showToDoList
  },
  watch: {
    isFirstDayOfMondayOrSunday: {
      handler(val) {
        if (val > 1) {
          let arr = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
          const arr1 = arr.slice(val - 1);
          const arr2 = arr.slice(0, val - 1);
          this.weeks = ["时段", ...arr1, ...arr2];
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.getCurWeek();
  },
  methods: {
    //展开与缩放操作
    handleExpand(row) {
      row.isExpend = !row.isExpend;
    },
    /**
     * 获取 时间
     * @param time
     */
    getWeek(time) {
      this.curDate = new Date(time);
      //当前是周几
      const whichDay = time.getDay();
      //显示今天周几
      if (whichDay) {
        this.curDay = "星期" + this.week[whichDay];
      } else {
        console.error("时间格式错误");
      }

      let num = 0;
      if (this.isFirstDayOfMondayOrSunday <= whichDay) {
        num = this.isFirstDayOfMondayOrSunday;
      } else {
        num = this.isFirstDayOfMondayOrSunday - 7;
      }
      const weekDay = time.getDay() - num;

      time = this.addDate(time, 0);
      for (let i = 0; i < 1; i++) {
        const { year, month, day } = formatDate(
          i === 0 ? time : this.addDate(time, 1)
        );
        this.months.push({
          date: `${year}-${month}-${day}`,
          showDate: `${month}-${day}`,
          timestamp: new Date(`${year}-${month}-${day}`).getTime(),
        });
      }
      this.months.sort((a, b) => a.timestamp - b.timestamp);
      delete this.months[0];
      this.todayDate = `${this.months[1].date}`;
      console.log("date" + this.months.length);
      console.log("date" + this.months);
    },
    /**
     * 处理日期
     * @param date
     * @param n
     * @returns {*}
     */
    addDate(date, n) {
      date.setDate(date.getDate() + n);
      return date;
    },
    /**
     * 上周
     */
    getLastWeek() {
      const date = this.addDate(this.curDate, -1),
        { year, month, day } = formatDate(date),
        dateObj = {
          date: `${year}-${month}-${day}`,
          timestamp: new Date(`${year}-${month}-${day}`).getTime(),
        };
      this.dealDate(date);
      this.$emit("changeWeek", dateObj);
    },
    /**
     * 本周
     */
    getCurWeek() {
      const { year, month, day } = formatDate(new Date()),
        dateObj = {
          date: `${year}-${month}-${day}`,
          timestamp: new Date(`${year}-${month}-${day}`).getTime(),
        };
      this.dealDate(new Date());
      this.$emit("changeWeek", dateObj);
    },
    /**
     * 下周
     */
    getNextWeek() {
      const date = this.addDate(this.curDate, 1),
        { year, month, day } = formatDate(date),
        dateObj = {
          date: `${year}-${month}-${day}`,
          timestamp: new Date(`${year}-${month}-${day}`).getTime(),
        };
      this.dealDate(date);
      this.$emit("changeWeek", dateObj);
    },
    /**
     * 显示当天日期状态
     * @param date
     */
    dealDate(date) {
      this.months = [""];
      this.getWeek(date);
      const curDate = getCurDay();
      this.months.forEach((item) => {
        item.isCurDate = item.date === curDate;
      });
    },
    /**
     * 点击卡片子内容查看详情
     * @param row
     */
    handleDetail(row) {
      this.$emit("handleDetail", row);
    },
    /**
     * 点击卡片查看全部内容
     * @param month
     * @param period
     */
    handleCardDetail(month, period) {
      this.$emit("handleCardDetail", { ...month, ...period });
    },
  },
};
</script>

<style>
ul {
  list-style: none;
}

ul,
li {
  margin: 0;
  padding: 0;
}

.course-week {
  width: 100%;
  border: 1px solid #ddd;
  padding: 1%;
  box-sizing: border-box;
}

.week-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 1%;
  box-sizing: border-box;
}

.week-top .week-btn-wrap {
  width: 200px;
  display: flex;
  justify-content: space-around;
  color: #409eff;
}

.week-top .week-btn-wrap span {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
}

.w-today-date {
  font-weight: bold;
  font-size: 16px;
}

.w-choose-status {
  display: flex;
  justify-content: flex-end;
  width: 200px;
}

.w-choose-status>div {
  width: 100%;
  flex: 1;
  display: flex;
  padding: 0 2%;
  white-space: nowrap;
  line-height: 20px;
  box-sizing: border-box;
}

.w-choose-status>div .square {
  display: flex;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-sizing: border-box;
}

.w-choose-status>div .title {
  display: flex;
  align-items: center;
  line-height: 16px;
  padding-left: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.week-table {
  display: flex;
  flex-direction: column;
}

.week-table .table-header {
  width: 100%;
  height: 40 px;
  background: #eaedf2;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #eaedf2;
  box-sizing: border-box;
}

.table-header .w-table-date,
.table-week {
  width: 100%;
  height: 40px;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table-header .w-table-date>span,
.table-week>span {
  flex: 1;
  color: #000;
  height: 100%;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.w-table-date .w-day-item,
.table-week .w-day-item {
  color: #000;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.week-table .w-time-period-list {
  width: 100%;
}

.w-time-period-list .w-time-period-row {
  width: 100%;
  min-height: 60px;
}

.w-time-period-col {
  width: 100%;
  min-height: 40px;
  display: flex;
}

.w-time-period-col .w-time-period {
  width: 12.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #eaedf2;
  border-bottom: 1px solid #eaedf2;
  box-sizing: border-box;
}

.w-time-period-col .w-row-day {
  width: 87.5%;
  display: flex;
  justify-content: center;
}

.w-row-day .w-things {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 1px solid #eaedf2;
  border-bottom: 1px solid #eaedf2;
  box-sizing: border-box;
}

.w-row-day .w-things:last-child {
  border-right: 1px solid #eaedf2;
}

.w-things .w-thing-item {
  text-align: center;
  display: flex;
  width: 80%;
  font-size: 14px;
  flex-direction: column;
  justify-content: space-around;
  min-height: 30px;
  border-radius: 10px;
  margin: 1% 1%;
  padding: 1% 2%;
  cursor: pointer;
  color: #fff;
  background: #ff6200;
  box-sizing: border-box;
  transition: all 1s linear 0.5s;
}

.w-isCurDate {
  color: #ff2525 !important;
}

.w-noMore {
  min-height: 200px;
  padding: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(156, 173, 173, 0.3);
  color: #9cadadb7;
  box-sizing: border-box;
}

.w_expand,
.w_shrink {
  color: #0a98d5;
  cursor: pointer;
  width: 100%;
  padding: 0 0 1% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.demo-scroll-top {
  height: 624px;
  overflow: auto;

}

.demo-scroll-top p {
  padding: 12px;
}
</style>
